.userPage {
  height: 100%;
  position: relative;

  .header {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 341px;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none; // requires or it prevents scroll events over it

    .blockedOverlay {
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      display: none;

      & > * {
        height: 100%;
      }
    }
  }

  &.isBlocked {
    .blockedOverlay {
      display: block;
    }
  }

  .pageContent {

    .pageControls {
      padding: 268px 0 40px 0;

      .tabTitle {
        color: #fff; // this text is always white, regardless of the theme
      }

      .storeWelcomeCallout {
        transform: translateY(-100%);
        top: -10px;
        left: -160px;
        width: 400px;

        &::before {
          left: auto;
          right: 20px;
        }
      }
    }

    .informationList {

      .informationHeader {
        font-size: $tx5;
      }

      .listItem > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .termsDisplay {
      position: absolute;
      top: $pad;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      z-index: 0; //don't overlap other absolute elements on the page

      &.open {
        display: block;
      }
    }

    .userPageHome {

      .aboutBox img {
        max-width: 100%;
      }

      .userCard {

        .contentBox {

          .content {
            height: auto;

            .contentTop {
              height: auto;
              margin-bottom: 10px;

              .userDescription {
                max-height: none;
                -webkit-line-clamp: unset;
              }
            }
          }
        }
      }
    }

    .userPageFollow {
      .userCardsContainer {
        flex-wrap: wrap;
        width: auto;
        margin: 0 #{-$padMd / 2};

        .userCard {
          width: 33.33333333333333%;
          flex: 0 0 auto;
          padding: 0 $padMd / 2 $padMd $padMd / 2;
          box-sizing: border-box;
        }
      }

      .followLoadingContainer {
        padding: $padHg;
        width: 100%;
      }

      &.noResults {
        min-height: 235px;
        position: relative;

        .followLoadingContainer {
          @include center();
        }
      }
    }

    .userPageStore {

      .userPageSearchBar {
        margin-bottom: $padMd;
        height: $barSm;

        .ctrl,
        .btn {
          height: $barSm;
          line-height: $barSm;
        }

        .btnLayoutFullWidth {
          display: none;
        }
      }

      .storeFilters {
        flex-basis: 228px;
        margin-right: $padMd;

        .contentBox {
          font-size: $tx5b;

          input[type="radio"] + label {
            font-size: $tx5b;
            line-height: 1.3em;
            min-height: 1.3em;
            padding: 0.3em 0px;
          }
        }

        & > * {
          margin-bottom: $pad;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .categoryOrTypeFilter {
          max-height: 250px;
          overflow: auto;

          .moreCatsWrap {
            .moreCats, .showLess {
              display: none;
            }

            &.expanded {
              .moreCats, .showLess {
                display: block;
              }

              .showMore {
                display: none;
              }
            }
          }
        }
      }

      .storeListings {
        flex-shrink: 1;
        width: 100%;

        .listingsGrid {
          // &:empty {
          //   & ~ .noResults {
          //     display: block;
          //   }
          // }
        }

        .listingsHeaderRow {
          .listingsCount {
            flex-grow: 1;
          }
        }
      }

      .listViewIcon {
        display: none;
      }

      &.listView {
        .listViewIcon {
          display: block;
        }

        .gridViewIcon {
          display: none;
        }

        .btnLayoutStandard,
        .btnLayoutFullWidth {
          @include disabled;
        }
      }

      .popInMessageHolder {
        z-index: 2; // so it's above the listing card overlays
      }
    }

    .userPageReputation {

      .repBg {
        font-size: 38px;
        display: inline-flex;

        & > .emoji {
          margin-right: 0.2em;
        }
      }

      .statsBox {
        min-height: 150px;
      }

      .reviews {
        .title {
          display: none;
        }

        .noReviews {
          text-align: center;
        }

        .loadMore {
          padding-top: $padLg;
          margin-top: $padLg;
          border-top-style: solid;
          border-top-width: 1px;
        }
      }
    }
  }
}

.userLoadingModal {
  padding-bottom: 0;

  header {
    height: 80px;
  }

  h1 {
    font-size: 1.8rem;
  }

  .contentWrap {
    // minimize the size of the form jumping as we transition from loading to
    // error states
    min-height: 45px;
  }

  .socialIcons {
    margin-bottom: 55px;
    font-size: $tx3;

    .non-ionic-icon {
      width: 15px;
      height: 15px;
      position: relative;
      top: -2px;
    }
  }
}
